<template>
	<view class="content" :style="'height:'+ this.h+'rpx'">
		<!-- 聊天内容 -->
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main">
				<view class="chat-ls" v-for="(item,index) in msg" :key="index" :id="'msg'+ index">
					<view class="chat-time" v-show="item.createTime != ''">{{item.createTime}}</view>
					<view class="msg-m" :class="[userId == item.poster.id?'msg-right':'msg-left']">
						<image class="user-img" src="../../../../static/logo.png"></image>
						<view class="message">
							<view class="msg-text">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<submit style="height: 120rpx;" v-on:send="send" @message="send"></submit>
	</view>
</template>

<script>
	import submit from '../../../../components/submit/submit.vue'
	export default {
		data() {
			return {
				ws: null,
				msg: [],
				h: null,
				inputValue: null,
				userId: null,
				scrollToView: '',
				con: true,
				if: false,
			}
		},
		methods: {
			connectSocketInit() {
				this.if = false
				console.log(uni.getStorageSync('student_access_token'))
				console.log(uni.getStorageSync('classroomId'))
				this.socketTask = uni.connectSocket({
					url: 'wss://tveti.lcvc.edu.cn/api/websocket/oauth/lesson/' + uni.getStorageSync('classroomId') +'?app_token=' + uni.getStorageSync('student_access_token'),
					// url: 'wss://tveti.lcvc.edu.cn/api/websocket/oauth/lesson/' + uni.getStorageSync('classroomId') +'?app_token=' + uni.getStorageSync('student_access_token'),
					success: () => {
						console.log("正准备建立websocket中...");
						// 返回实例
						return this.socketTask
					},
					fail: () => {
						console.log("连接失败")
					}
				});
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常！");
				});
				this.socketTask.onMessage((res) => {
					console.log(this.if)
					if(this.if){
						this.msg.push(JSON.parse(res.data).data)
						console.log(JSON.parse(res.data).data)
						this.goBottom();
					}else{
						uni.setStorageSync("chatHistory", JSON.parse(res.data).data)
						// this.msg.push(JSON.parse(res.data).data)
						this.msg = JSON.parse(res.data).data
						console.log(res)
						console.log(this.msg)
						this.goBottom();
					}
					this.if = true
				});
				uni.onSocketError((res) => {
					console.log('WebSocket连接打开失败，请检查！');
					this.connectSocketInit()
				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
					if (this.con) {
						this.connectSocketInit()
					}
				})
			},
			//发送消息
			send(message) {
				console.log(message)
				this.socketTask.send({
					data: JSON.stringify({
						content: message
					}),
				});
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			// 滚动到底部
			goBottom() {
				console.log("触发滚动"+this.msg.length)
				this.$nextTick(function() {
					this.scrollToView = 'msg' + (this.msg.length - 1)
					console.log(this.msg.length)
				})
			},
		},
		onLoad() {
			this.userId = uni.getStorageSync("userId")
			this.connectSocketInit()
			uni.getSystemInfo({
				success: (res) => {
					this.h = res.windowHeight * 2 - 130;
				}
			})
		},
		// 退出页面关闭长链接
		onUnload() {
			this.socketTask.close();
			this.con = false
			this.if = false
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		background-color: rgba(244, 244, 244, 1);
	}

	.chat {
		height: 100%;

		.chat-main {
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 20rpx;
			// padding-bottom: 120rpx;  //获取动态高度
			display: flex;
			flex-direction: column;
		}

		.chat-ls {
			.chat-time {
				font-size: 24rpx;
				color: rgba(39, 40, 50, 0.3);
				line-height: 34rpx;
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.msg-m {
				display: flex;
				padding: 20rpx 0;

				.user-img {
					flex: none;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.message {
					flex: none;
					max-width: 480rpx;
				}

				.msg-text {
					font-size: 32rpx;
					color: rgba(39, 40, 50, 1);
					line-height: 44rpx;
					padding: 18rpx 24rpx;
				}

				.msg-img {
					max-width: 400rpx;
					border-radius: 20rpx;
				}

				.msg-map {
					background: #fff;
					width: 464rpx;
					height: 284rpx;
					overflow: hidden;

					.map-name {
						font-size: 32rpx;
						color: rgba(39, 40, 50, 1);
						line-height: 44rpx;
						padding: 18rpx 24rpx 0 24rpx;
						//下面四行是单行文字的样式
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.map-address {
						font-size: 24rpx;
						color: rgba(39, 40, 50, 0.4);
						padding: 0 24rpx;
						//下面四行是单行文字的样式
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}

					.map {
						padding-top: 8rpx;
						width: 464rpx;
						height: 190rpx;
					}
				}

				.voice {
					// width: 200rpx;
					min-width: 100rpx;
					max-width: 400rpx;
				}

				.voice-img {
					width: 28rpx;
					height: 36rpx;
				}
			}

			.msg-left {
				flex-direction: row;

				.msg-text {
					margin-left: 16rpx;
					background-color: #fff;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}

				.ms-img {
					margin-left: 16rpx;
				}

				.msh-map {
					margin-left: 16rpx;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
				}

				.voice {
					text-align: right;

				}

				.voice-img {
					float: left;
					transform: rotate(180deg);
					width: 28rpx;
					height: 36rpx;
					padding-bottom: 4rpx;
				}
			}

			.msg-right {
				flex-direction: row-reverse;

				.msg-text {
					margin-right: 16rpx;
					background-color: rgba(255, 228, 49, 0.8);
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}

				.ms-img {
					margin-right: 16rpx;
				}

				.msh-map {
					margin-left: 16rpx;
					border-radius: 20rpx 0rpx 20rpx 20rpx;
				}

				.voice {
					text-align: left;

				}

				.voice-img {
					float: right;
					padding: 4rpx;
					width: 28rpx;
					height: 36rpx;
				}
			}
		}
	}
</style>
